<template>
  <el-table class="table-box" :data="copytableData" style="width: 100%" :border="isborder"
    @selection-change="handleSelectionChange" :header-cell-style="{ backgroundColor: '#34495E', color: 'white' }">
    <el-table-column type="selection" width="55" v-if="isselection" align="center" />
    <template v-for="item in columns" :key="item">
      <el-table-column v-if="item.slot" :prop="item.prop" :label="item.label" :width="item.width || 'auto'"
        align="center" :show-overflow-tooltip="istooltip" :fixed="item.fixed">
        <template #default="{ row }">
          <slot :name="item.slot" :tabledatas="row"></slot>
        </template>
      </el-table-column>

      <el-table-column v-else :prop="item.prop" :label="item.label" :width="item.width||'auto'" align="center"
        :show-overflow-tooltip="istooltip" :formatter="item.formatter" :fixed="item.fixed" />
    </template>
    <el-table-column fixed="right" label="操作" min-width="200px" align="center">
      <template #default="{ row }">
        <slot name="option" :tabledatas="{ ...row }"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script  setup>
import { cloneDeep } from 'lodash'
const emit = defineEmits(['selectionchange'])
const copytableData = ref([])
const ids=ref([])
const props=defineProps({
  tableData:{
    type:Array,
    default:()=>[]
  },//数据
  columns: {
    type: Array,
    required: true,
    default:()=>[]
  },
  // 是否显示tooltip
  istooltip:{
    type:Boolean,
    default:false
  },
  // 是否显示边框
  isborder:{
    type:Boolean,
    default:true
  },
  //是否显示多选框
  isselection:{
    type:Boolean,
    default:true
  },
  idtype: {
    type: String,
    default: 'id'
}
})
const handleSelectionChange = (val) => {
  ids.value = val.map(item => item[props.idtype])

  
  emit('selectionchange', ids.value)
  
}
watch(()=>props.tableData,(newdata,old)=>{
  copytableData.value = cloneDeep(newdata)
})
</script>

<style lang="scss" scoped>

</style>